
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>this指向</title>
</head>
<body>


    <button>点击</button>
    <input type="text" value="默认值">



    <script>
        // this: 关键字、指向 指代  一般指代的是谁调用它 this指向谁   this指向调用者           super: 子类指向父类构造器
        // 1- 全局内调用： fn()  指向window
        // 2- 对象内的方法调用：obj.fn()  指向调用对象
        // 3- 构造函数调用：new Person()   指向实例对象
        // 4- 事件处理函数中调用：指向当前触发事件的DOM元素
        // 5- 特殊调用 比如 call、apply、bind可以改变this指向，fun.call(obj)    指向 obj

        // 6-es6中箭头函数的this指向  -》 父级作用域上下文对象


         // 1:全局环境下的this指向  window

        //  function fn() {
        //     console.log("hello ");
        //     console.log(this);
        //  }

        //  fn()
        //  this.fn()
        //  window.fn()

         // 2- 对象内的方法调用：obj.fn()  指向调用对象

        const  obj = {
            name:"tom",
            sayName(){
                console.log(this.name);//tom
                console.log(this);     //
            }
        }

        obj.sayName()


        // 3- 构造函数调用：new Person()   指向实例对象

        function Person(name) {
            this.name = name
            console.log(this);//
        }

        const p = new Person("jack")


        // 4- 事件处理函数中调用：指向当前触发事件的DOM元素
        document.querySelector("button").onclick = function () {
            console.log(this);
            
        }

        document.querySelector("input").addEventListener("input",function () {
            console.log(this);
            
        },true)


         // 5- 特殊调用-强制改变this指向  call()、apply()、bind()()可以改变this指向

        //  call apply 参数不一样，   call(this,a,b,c)   apply(this,[a,b,c])
        // bind 返回的是一个新的函数，你必须调用它才会被执行。 bind(this,a,b,c)()


         const o = {
            name:"king",
            hobby:"swimming"
         }

         function fun(x,y,z) {
            console.log(this);
            return x+y+z
         }

        //  fun()  //window
        // console.log(fun.call(o,1,2,3));
        // console.log(fun.apply(o,[1,2,3]));
        console.log(fun.bind(o,1,2,3)());
         
        //  fun.apply(o)
        //  fun.bind(o)(this)

        //  使用场景- 求数组的最大值/最小值

        console.log(Math.max(1,2,3,4,100,66));
        console.log(Math.min(1,2,3,4,100,66));


        console.log(Math.max(...[1,2,3,4,100,66]));
        console.log(Math.min(...[1,2,3,4,100,66]));

          // apply 或者 call 如果不需要改变this指向 写 null 
          console.log(Math.max.apply(null,[1,2,3,4,100,66]));
          console.log(Math.min.apply(null,[1,2,3,4,100,66]));


    </script>
</body>
</html>